<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue.js"></script>
</head>

<body>
    <div class="div">

        <!-- .self 意思是如果是冒泡冒上来的我就不执行 只执行自己的-->
        <ul @click.self="father">
            <!-- .stop 和  e.stopPropagation(); 都是阻止事件冒泡
             .stop 是vue里面给出的简写 -->
            <li @click.stop="erzi">我是儿子1（li</li>

        </ul>
        <!-- prevent 阻止默认行为  阻止form跳转行为-->
        <form action="" @click.prevent="submit">
            <button type="submit">阻止默认行为-----</button>
        </form>
        <!-- .once  只能触发一次事件 一次性事件触发 -->
        <button @click.once="cj">抽奖</button><br>

        <button type="button" @click="isonce && cjs()">一次性抽奖第二种方法</button>
    </div>
    <script>
        const obj = {
            data() {
                return {
                    isonce: true
                }
            },
            methods: {
                father() {
                    console.log('我是你爸爸ul-------');
                },
                erzi(e) {
                    console.log('我是儿子1（li-------');
                    // 阻止事件冒泡
                    // .stop 和  e.stopPropagation(); 都是阻止事件冒泡
                    //  .stop 是vue里面给出的简写
                    // e.stopPropagation();
                },
                submit() {
                    console.log('阻止默认行为-----');
                },
                cj() {
                    console.log('一次性触发事件---');
                },
                cjs() {
                    console.log('为false我就不执行了=---');
                    // 当isonce为false就不能点了
                    this.isonce = false
                }

            }
        }
        Vue.createApp(obj).mount('.div')
    </script>
</body>

</html>